<template>
    <div style="display: flex;flex-wrap: wrap;">
        <h3 v-if="bookList.length===0">没有找到结果，换个姿势看看？</h3>
        <div style="width: 50%"  v-for="(item,index) in bookList" :key="index">
            <el-card style="margin: 5px;" body-style="display:flex">
                <div style="width: 30%;cursor: pointer" v-on:click="toDetail(item.bookId)">
                    <img :src="item.imageUrl" class="image">
                </div>
                <div style="width: 70%">
                    <div style="height: 120px">
                        <p style="font-weight: bolder">{{item.name}}</p>
                        <p><span>{{item.author}}</span>/<span>{{item.press}}</span></p>
                    </div>
                    <el-button-group>
                        <el-button size="small" plain type="primary" @click="addtoCart(item.bookId)">加入购物车</el-button>
                        <el-button size="small" plain type="danger" @click="beginBuy(index)">直接购买</el-button>
                    </el-button-group>
                </div>
            </el-card>
        </div>
        <el-dialog
                title="购买数量"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-card style="margin: 5px;" body-style="display:flex">
                <div style="width: 30%;cursor: pointer" v-on:click="toDetail(onBuy.bookId)">
                    <img :src="onBuy.imageUrl" class="image">
                </div>
                <div style="width: 70%">
                    <div style="height: 120px">
                        <p style="font-weight: bolder">{{onBuy.name}}</p>
                        <p><span>{{onBuy.author}}</span>/<span>{{onBuy.press}}</span></p>
                        <el-input-number size="small" v-model="buyCount" :min="1"></el-input-number>
                    </div>
                </div>
            </el-card>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="directPay(onBuy.bookId,buyCount)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<!--uid:20210001-->

<script>
    import axios from 'axios'
    export default {
        name: "BookList",
        data(){
            return{
                dialogVisible:false,
                onBuy:{},
                buyCount:1
            }
        },
        props:{
            bookList:[]
        },
        methods:{
            beginBuy(index){
                this.onBuy=this.bookList[index]
                console.log(this.onBuy)
                this.buyCount=1
              this.dialogVisible = true
            },
            handleClose(){
                this.dialogVisible=false
            },
            async directPay(bookId,count){
                let mydata = {
                    uid:sessionStorage.getItem("userId"),
                    bookId:bookId,
                    count:count
                }
                axios.post('/cart/directPay',mydata).then((res)=>{
                    console.log(res)
                    if (res.data.code===0||res.data.code==200){
                        this.$message.success("成功")

                    }
                })
                this.handleClose()

            },
            async addtoCart(bookId){
                let mydata = {
                    uid:sessionStorage.getItem("userId"),
                    bookId:bookId,
                    count:1
                }
                console.log(mydata)
              axios.post('/cart/addBook',mydata,{
                headers:{
                  userId:window.sessionStorage.getItem("userId"),
                  bookId:mydata.bookId
                }
              }).then((res)=>{
                  console.log(res)
                  if(res.data.code===0||res.data.code===200){
                      this.$notify.success("加入购物车成功")
                  }
              })
            },
            toDetail(param){
                this.$router.push({ path:'/home/bookdetail', query:{ bookId:param } })
                this.$emit('updateList');
            },
        }
    }
</script>

<style scoped>
    .image{
        height: 180px;
        width:150px;
    }
</style>
